Event Propagation এবং Preventing Default Behavior
Event Propagation এবং Preventing Default Behavior হল দুটি গুরুত্বপূর্ণ ধারণা যা ওয়েব ডেভেলপমেন্টে ইভেন্ট হ্যান্ডলিংয়ের সময় ব্যবহৃত হয়। সাধারণত JavaScript বা Elm (যেহেতু Elm Web অ্যাপ্লিকেশনের জন্য ব্যবহৃত হয়) এ এই ধারণাগুলি ব্যবহৃত হয় ইভেন্টের প্রতিক্রিয়া নিয়ন্ত্রণ করতে এবং এটি যাতে পূর্বনির্ধারিত (default) আচরণ থেকে সঠিকভাবে পরিবর্তিত হয়।
এখানে Event Propagation এবং Preventing Default Behavior এর ধারণা এবং ব্যবহারের বিস্তারিত আলোচনা করা হলো।
১. Event Propagation
Event Propagation হলো সেই প্রক্রিয়া যেখানে একটি ইভেন্ট একটি DOM উপাদান (element) থেকে তার প্যারেন্ট উপাদানে বা বাচ্চা উপাদানে চলে যায়। ইভেন্টের প্রপাগেশন দুটি ধাপে বিভক্ত:
- Capturing Phase: ইভেন্ট DOM tree এর উপর দিয়ে চলে (অথবা parent থেকে child এ যায়)।
- Bubbling Phase: ইভেন্ট DOM tree এর নিচ থেকে উপরের দিকে (অথবা child থেকে parent এ যায়)।
Event Propagation এর মাধ্যমে আপনি ইভেন্টের আচরণ নিয়ন্ত্রণ করতে পারেন। JavaScript বা Elm এর মাধ্যমে আপনি নির্দিষ্ট ভাবে ইভেন্টের প্রপাগেশনকে থামাতে বা কন্ট্রোল করতে পারবেন।
উদাহরণ: Event Propagation in JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Propagation</title>
</head>
<body>
<div id="parent">
Parent Element
<button id="child">Click me</button>
</div>
<script>
document.getElementById('parent').addEventListener('click', function() {
alert('Parent clicked');
});
document.getElementById('child').addEventListener('click', function(event) {
alert('Child clicked');
});
</script>
</body>
</html>এখানে, যখন আপনি child button এ ক্লিক করবেন, প্রথমে child clicked আলার্ম দেখাবে, তারপর parent clicked দেখাবে। এটি bubbling ফেজের মাধ্যমে ঘটে। অর্থাৎ ইভেন্ট প্রথমে child এ ঘটে এবং তারপর parent এ propagate করে।
২. Preventing Event Propagation
আপনি যদি ইভেন্টের প্রপাগেশন থামাতে চান, যেমন child element এ ক্লিক করার পর parent element-এ ইভেন্ট পৌঁছানোর আগেই তা থামাতে চান, তাহলে আপনি stopPropagation() মেথড ব্যবহার করতে পারেন। এটি ইভেন্টের further propagation থামিয়ে দেয়।
উদাহরণ: Preventing Propagation in JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prevent Event Propagation</title>
</head>
<body>
<div id="parent">
Parent Element
<button id="child">Click me</button>
</div>
<script>
document.getElementById('parent').addEventListener('click', function() {
alert('Parent clicked');
});
document.getElementById('child').addEventListener('click', function(event) {
event.stopPropagation(); // Stops the event from bubbling up
alert('Child clicked');
});
</script>
</body>
</html>এখানে, আপনি যখন child button এ ক্লিক করবেন, শুধুমাত্র child clicked আলার্ম দেখাবে, এবং parent clicked আলার্ম দেখানো হবে না, কারণ stopPropagation() মেথড ব্যবহার করা হয়েছে যা propagation থামিয়ে দিয়েছে।
৩. Preventing Default Behavior
ইভেন্টের default behavior হল সেই আচরণ যা ব্রাউজার নিজে থেকে একটি ইভেন্টের জন্য করে, যেমন:
<a>লিঙ্ক ক্লিক করলে পেজ রিডাইরেক্ট করা।<form>সাবমিট হলে পেজ রিফ্রেশ হওয়া।
কিন্তু, আপনি যদি চান না যে ব্রাউজার এই আচরণটি কার্যকর করুক, তবে আপনি preventDefault() মেথড ব্যবহার করতে পারেন।
উদাহরণ: Preventing Default Behavior in JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prevent Default Behavior</title>
</head>
<body>
<form id="myForm">
<input type="text" placeholder="Type something">
<button type="submit">Submit</button>
</form>
<script>
document.getElementById('myForm').addEventListener('submit', function(event) {
event.preventDefault(); // Prevent the form from submitting and refreshing the page
alert('Form submitted, but no page refresh');
});
</script>
</body>
</html>এখানে, preventDefault() ব্যবহার করা হয়েছে, যার ফলে ফর্ম সাবমিটের সময় পেজ রিফ্রেশ হবে না। আপনি কাস্টম সাবমিট আচরণ তৈরি করতে পারবেন, যেমন AJAX দিয়ে ডেটা সাবমিট করা।
৪. Elm এ Event Propagation এবং Preventing Default Behavior
Elm এ সরাসরি event propagation বা default behavior থামানোর জন্য কোনো built-in API নেই, কারণ Elm একটি declarative এবং pure ফাংশনাল ভাষা এবং DOM ইভেন্টগুলোকে সহজভাবে পরিচালনা করতে ফ্রেমওয়ার্ক থেকে সরবরাহ করা হয়।
তবে, আপনি JavaScript Ports ব্যবহার করে Elm থেকে ইভেন্ট হ্যান্ডলিং এবং default behavior নিয়ন্ত্রণ করতে পারেন। Ports ব্যবহার করে আপনি JavaScript-এ ইভেন্ট হ্যান্ডলিং সঞ্চালন করতে পারবেন এবং তারপর তা Elm অ্যাপ্লিকেশনে পাঠাতে পারবেন।
উদাহরণ: Elm and JavaScript via Ports
Elm Code:
port module Main exposing (..)
port preventDefault : Cmd msg
update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
case msg of
PreventEvent -> (model, preventDefault)
view : Model -> Html Msg
view model =
div []
[ button [ onClick PreventEvent ] [ text "Click me to prevent default" ] ]JavaScript Code (in Ports):
var app = Elm.Main.init({
node: document.getElementById('elm')
});
app.ports.preventDefault.subscribe(function() {
document.querySelector('button').addEventListener('click', function(event) {
event.preventDefault(); // Prevent default behavior
alert('Default behavior prevented');
});
});এখানে, Elm অ্যাপ্লিকেশন থেকে JavaScript এর preventDefault পোর্টে সিগন্যাল পাঠানো হচ্ছে এবং JavaScript এ সেই সিগন্যালের মাধ্যমে button ক্লিক করলে default behavior থামানো হচ্ছে।
উপসংহার
Event Propagation এবং Preventing Default Behavior ওয়েব ডেভেলপমেন্টে গুরুত্বপূর্ণ। এগুলি ইভেন্ট হ্যান্ডলিংয়ের সময় আপনাকে কাস্টম আচরণ তৈরি করতে এবং ইভেন্টের প্রপাগেশন বা ডিফল্ট আচরণকে নিয়ন্ত্রণ করতে সহায়তা করে। JavaScript-এ এগুলি সরাসরি প্রয়োগ করা সম্ভব, এবং Elm অ্যাপ্লিকেশনগুলিতে Ports ব্যবহার করে এই কাজগুলো ইন্টারঅ্যাক্টিভভাবে বাস্তবায়ন করা যায়।
Read more
